<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="/css/personal.css" rel="stylesheet" type="text/css">
    <link href="/css/addstyle.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/address.js"></script>
    <th:block th:include="common.html :: source"></th:block>
    <script language="javascript" src="/js/province.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/assets/js/distpicker.js"></script>
    <script src="/assets/js/amazeui.js"></script>
</head>
<body onload='getProvince()'>
<th:block th:include="common.html :: header"></th:block>
<div class="i_bg bg_color">
    <div class="m_content">

        <div class="m_left" style="width: 211px">
            <div class="left_n">管理中心</div>
            <div class="left_m">
                <div class="left_m_t t_bg1">订单中心</div>
                <ul>
                    <li><a href="/order/getOrderList" >我的订单</a></li>
                </ul>
            </div>
            <div class="left_m">
                <div class="left_m_t t_bg2">会员中心</div>
                <ul>
                    <li><a href="/user/info" >用户信息</a></li>
                    <li><a href="/userAddress/getAddressList" >地址管理</a></li>
                </ul>
            </div>
        </div>


        <div class="m_right" >
            <div class="col-main" >
                <div class="main-wrap" style="margin-left: 10px">

                    <div class="user-address">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> / <small>Address&nbsp;list</small></div>
                        </div>
                        <hr/>
                        <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" >

                            <li class="user-addresslist defaultAddr" th:each="address:${addressList}" th:if="${address.isdefault==1}">
                                <span class="new-option-r" ><i class="am-icon-check-circle"></i>默认地址</span>
                                <p class="new-tit new-p-re">
                                    <span class="new-txt" th:text="${address.consignee}"></span>
                                    <span class="new-txt-rd2" th:text="${address.phone}"></span>
                                </p>
                                <div class="new-mu_l2a new-p-re">
                                    <p class="new-mu_l2cw">
                                        <span class="title">地址：</span>
                                        <span class="province" th:text="${address.province}"></span>
                                        <span class="city" th:text="${address.city}"></span>
                                        <span class="dist" th:text="${address.area}"></span>
                                        <span class="street" th:text="${address.address}"></span></p>
                                </div>
                                <div class="new-addr-btn" style="position: absolute;right: 37px" >
                                    <a th:onclick="getAddress([[${address.id}]])"><i class="am-icon-edit"></i>编辑</a>
                                    <span class="new-addr-bar">|</span>
                                    <a href="javascript:void(0);" ><i class="am-icon-trash"></i>删除</a>
                                </div>
                            </li>

                            <li class="user-addresslist" th:each="address:${addressList}" th:if="${address.isdefault==0}">
                                <span class="new-option-r" ><i class="am-icon-check-circle"></i><a th:onclick="setDefault([[${address.id}]])">设为默认</a></span>
                                <p class="new-tit new-p-re">
                                    <span class="new-txt" th:text="${address.consignee}"></span>
                                    <span class="new-txt-rd2" th:text="${address.phone}"></span>
                                </p>
                                <div class="new-mu_l2a new-p-re">
                                    <p class="new-mu_l2cw">
                                        <span class="title">地址：</span>
                                        <span class="province" th:text="${address.province}"></span>
                                        <span class="city" th:text="${address.city}"></span>
                                        <span class="dist" th:text="${address.area}"></span>
                                        <span class="street" th:text="${address.address}"></span></p>
                                </div>
                                <div class="new-addr-btn" style="position: absolute;right: 37px" >
                                    <a th:onclick="getAddress([[${address.id}]])"><i class="am-icon-edit"></i>编辑</a>
                                    <span class="new-addr-bar">|</span>
                                    <a th:onclick="delClick([[${address.id}]])"><i class="am-icon-trash"></i>删除</a>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                        <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                        <!--例子-->
                        <div class="am-modal am-modal-no-btn" id="doc-modal-1">

                            <div class="add-dress">

                                <!--标题 -->
                                <div class="am-cf am-padding">
                                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small></div>
                                </div>
                                <hr/>

                                <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                                    <form class="am-form am-form-horizontal">
                                        <div class="am-form-group">
                                            <label for="user-name" class="am-form-label">收货人</label>
                                            <div class="am-form-content">
                                                <input type="text" id="user-name" placeholder="收货人">
                                            </div>
                                        </div>
                                        <div class="am-form-group">
                                            <label for="user-phone" class="am-form-label">手机号码</label>
                                            <div class="am-form-content">
                                                <input id="user-phone" placeholder="手机号必填" type="email">
                                            </div>
                                        </div>

<!--                                        <div class="am-form-group">-->
                                            <label class="am-form-label" style="position: absolute">所在地</label>
                                        <div class="am-form-content address1">
                                            <div id="target"><!-- container -->
                                                <select id="province" ></select><!-- 省 -->
                                                <select id="city"></select><!-- 市 -->
                                                <select id="area"></select><!-- 区 -->
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <label for="user-intro" class="am-form-label">详细地址</label>
                                            <div class="am-form-content">
                                                <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                                                <small>100字以内写出你的详细地址...</small>
                                            </div>
                                        </div>

                                        <div class="am-form-group">
                                            <div class="am-u-sm-9 am-u-sm-push-3">
                                                <a class="am-btn am-btn-danger" onclick="addAddress()">保存</a>
                                                <a href="javascript: void(0)" class="am-close am-btn am-btn-danger" data-am-modal-close>取消</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>

                        </div>

                    </div>
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $(".new-option-r").click(function() {
                                $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                            });

                            var $ww = $(window).width();
                            if($ww>640) {
                                $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                            }

                        })
                    </script>
                    <script type="text/javascript">
                        $(function(){
                            $('#target').distpicker();
                        });
                    </script>

                    <script>
                        function addAddress() {
                            let consignee = document.getElementById("user-name").value;
                            let phone = document.getElementById("user-phone").value;
                            let province = document.getElementById("province").value;
                            let city =document.getElementById("city").value;
                            let area =document.getElementById("area").value;
                            let address = document.getElementById("user-intro").value;
                            window.location.href="/userAddress/addAddress/"+consignee+"/"+phone+"/"+province+"/"+city+"/"+area+"/"+address+"/userAddressList";
                        }
                    </script>

                    <script>
                        function delClick(id) {
                            window.location.href="/userAddress/deleteAddress/"+id+"/userAddressList";
                        }
                    </script>

                    <script>
                        function setDefault(id) {
                            window.location.href="/userAddress/setDefault/"+id+"/userAddressList";
                        }
                    </script>

                    <script>
                        function getAddress(addressId) {
                            window.location.href="/userAddress/getAddress/"+addressId+"/userAddressList";
                        }
                    </script>



                    <div class="clear"></div>

                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="common.html :: footer"></th:block>
<th:block th:include="common.html :: permit"></th:block>
</body>
</html>